<template>
   <div>
      <div class="page-header">
         <div class="page-header-index-wide" style="background-color: #fff;">
            <div class="detail">
               <div class="w-main" style="margin: 10px;height: 100px;padding: 10px;">
                  <div class="row">
                     <div class="avatar">
                        <span class="ant-avatar ant-avatar-circle ant-avatar-image">
                           <img src="../../assets/hyl.jpg" />
                        </span>
                     </div>
                     <div class="headerContent">
                        <div>
                           <div class="title">
                              上午好，博羸兄弟
                              <span class="welcome-text">，休息一会儿吧</span>
                           </div>
                           <div>全栈工程师 | 自由职业者 - 某某某事业群 - VUE平台</div>
                        </div>
                     </div>
                     <div slot="extra" style="float: right;width: 40%;">
                        <a-row class="more-info">
                           <a-col :span="8">
                              <head-info
                                 title="团队"
                                 content="2/56"
                                 :center="false"
                                 :bordered="false"
                              />
                           </a-col>
                           <a-col :span="8">
                              <head-info
                                 title="任务总数"
                                 content="8/24"
                                 :center="false"
                                 :bordered="false"
                              />
                           </a-col>
                           <a-col :span="8">
                              <head-info title="进行中任务数" content="2,223" :center="false" />
                           </a-col>
                        </a-row>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div>
         <a-row :gutter="24" style="margin-left: 0px; margin-right: 0px;">
            <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
               <a-card
                  class="project-list"
                  :loading="loading"
                  :bordered="false"
                  title="进行中的项目"
                  :body-style="{ padding: 0 }"
               >
                  <!-- <a slot="extra" style="margin-right:10px;" @click="modalStatus=true">添加项目</a> -->
                  <el-button
                     slot="extra"
                     type="text"
                     style="margin-right:10px;"
                     @click="creatPro"
                  >创建项目</el-button>
                  <!-- <a slot="extra">全部项目</a> -->
                  <el-button slot="extra" type="text" @click="allProject">全部项目</el-button>
                  <div>
                     <a-card-grid
                        class="project-card-grid"
                        :key="i"
                        v-for="(item, i) in projectData"
                        v-loading="tableLoading"
                     >
                        <a-card :bordered="false" :body-style="{ padding: 0 }">
                           <a-card-meta>
                              <div slot="title" class="card-title">
                                 <a-avatar
                                    size="small"
                                    src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
                                 />
                                 <router-link
                                    :to="{path:'/project/detail', query:{projectId:item.projectId}}"
                                 >{{item.name}}</router-link>
                              </div>
                              <div slot="description" class="card-description">{{item.description}}</div>
                           </a-card-meta>
                           <div class="project-item">
                              <span class="datetime">{{item.createTime}}</span>
                              <div>
                                 <el-dropdown>
                                    <span class="el-dropdown-link">
                                       <el-button type="text">操作</el-button>
                                       <i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                       <el-dropdown-item>
                                          <el-button type="text" @click="proEdit(item)">编辑</el-button>
                                       </el-dropdown-item>
                                       <el-dropdown-item>
                                          <el-button type="text" @click="delEdit(item)">删除</el-button>
                                       </el-dropdown-item>
                                    </el-dropdown-menu>
                                 </el-dropdown>
                              </div>
                           </div>
                        </a-card>
                     </a-card-grid>
                  </div>
               </a-card>
               <div style="text-align:right;margin:10px 0px;">
                  <el-button-group v-if="page.total>page.pageSize">
                     <el-button
                        size="mini"
                        icon="el-icon-arrow-left"
                        @click="prev"
                        v-if="page.currentPage !=1"
                     >上一页</el-button>
                     <el-button
                        size="mini"
                        icon="el-icon-arrow-right el-icon--right"
                        @click="next"
                        v-if="page.pages != page.currentPage"
                     >下一页</el-button>
                  </el-button-group>
               </div>
               <a-card :loading="loading" title="团队" :bordered="false">
                  <div class="members">
                     <a-row>
                        <a-col :span="12" v-for="(item, index) in teams" :key="index">
                           <a>
                              <a-avatar
                                 size="small"
                                 src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
                              />
                              <span class="member">名称</span>
                           </a>
                        </a-col>
                     </a-row>
                  </div>
               </a-card>
            </a-col>
            <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
               <!-- <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
               >
                  <div class="item-group">
                     <a>操作一</a>
                     <a>操作二</a>
                     <a>操作三</a>
                     <a>操作四</a>
                     <a>操作五</a>
                     <a>操作六</a>
                     <a-button size="small" type="primary" ghost icon="plus">添加</a-button>
                  </div>
               </a-card>
               <a-card
                  title="XX 指数"
                  style="margin-bottom: 24px"
                  :loading="radarLoading"
                  :bordered="false"
                  :body-style="{ padding: 0 }"
               >
                  <div style="min-height: 400px;">
                     :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts" 
                     <radar :data="radarData" />
                  </div>
               </a-card>-->
               <a-card :loading="loading" title="任务动态" :bordered="false">
                  <a-list>
                     <a-list-item :key="index" v-for="(item, index) in activities">
                        <a-list-item-meta>
                           <a-avatar
                              slot="avatar"
                              src="https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png"
                           />
                           <div slot="title">
                              <span>昵称</span>&nbsp;
                              在&nbsp;
                              <el-button type="text">项目名称</el-button>&nbsp;
                              <span>动作</span>&nbsp;
                              <el-button type="text">什么事</el-button>
                           </div>
                           <div slot="description">时间</div>
                        </a-list-item-meta>
                     </a-list-item>
                  </a-list>
               </a-card>
            </a-col>
         </a-row>
         <a-modal
            v-model="modalStatus"
            :title="dialogName==1?'创建项目':dialogName==2?'编辑项目':''"
            :width="screen ==3 ?'50%':'70%'"
         >
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
               <el-row :gutter="10">
                  <el-col :xs="24" :sm="12">
                     <el-form-item label="项目名称" prop="name" :label-width="formLabelWidth">
                        <a-input v-model="ruleForm.name" placeholder="项目名称" />
                     </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12">
                     <el-form-item label="项目类型" prop="projectType" :label-width="formLabelWidth">
                        <el-select
                           v-model="ruleForm.projectType"
                           placeholder="请选择项目类型"
                           style="width:100%"
                        >
                           <el-option
                              v-for="item in projectTypeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                           ></el-option>
                        </el-select>
                     </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12">
                     <el-form-item label="项目进度" prop="schedule" :label-width="formLabelWidth">
                        <el-input-number
                           v-model="ruleForm.schedule"
                           :step="5"
                           :max="100"
                           :min="0"
                           style="width:100%"
                        ></el-input-number>
                     </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12">
                     <el-form-item label="激励类型" prop="status" :label-width="formLabelWidth">
                        <el-select
                           v-model="ruleForm.incentiveType"
                           placeholder="请选择激励类型"
                           style="width:100%"
                        >
                           <el-option
                              v-for="item in incentiveTypeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                           ></el-option>
                        </el-select>
                     </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12">
                     <el-form-item label="项目激励token" prop="token" :label-width="formLabelWidth">
                        <el-input v-model.number="ruleForm.token"></el-input>
                     </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12">
                     <el-form-item label="项目激励现金" prop="cash" :label-width="formLabelWidth">
                        <el-input v-model.number="ruleForm.cash">
                           <el-button slot="append">元</el-button>
                        </el-input>
                     </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12">
                     <el-form-item label="项目开始时间" prop="beginTime" :label-width="formLabelWidth">
                        <el-date-picker
                           v-model="ruleForm.beginTime"
                           type="datetime"
                           placeholder="选择项目开始时间"
                           align="right"
                           style="width:100%"
                           value-format="yyyy-MM-dd hh:mm:ss"
                        ></el-date-picker>
                     </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12">
                     <el-form-item label="项目截至时间" prop="endTime" :label-width="formLabelWidth">
                        <el-date-picker
                           v-model="ruleForm.endTime"
                           type="datetime"
                           placeholder="选择项目开始时间"
                           align="right"
                           style="width:100%"
                           value-format="yyyy-MM-dd hh:mm:ss"
                        ></el-date-picker>
                     </el-form-item>
                  </el-col>

                  <el-col :xs="24" :sm="24">
                     <el-form-item label="项目描述" prop="description" :label-width="formLabelWidth">
                        <el-input v-model="ruleForm.description" type="textarea" />
                     </el-form-item>
                  </el-col>
               </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
               <el-button
                  type="primary"
                  @click="submitForm('ruleForm')"
                  :loading="confirmLoading"
                  v-if="dialogName==1"
               >完成并创建</el-button>
               <el-button type="primary" @click="proEditSub('ruleForm')" v-else>提交</el-button>
            </div>
         </a-modal>
      </div>
   </div>
</template>

<script>
const DataSet = require("@antv/data-set");
import HeadInfo from "@/components/Charts/HeadInfo";
import Radar from "@/components/Charts/Radar";
import { mapGetters } from "vuex";

import { fetchList, addObj, delObj, putObj } from "@/api/project/";

export default {
   name: "Workplace",
   computed: {
      ...mapGetters(["screen"])
   },
   components: {
      Radar,
      HeadInfo
   },
   data() {
      return {
         avatar: "",
         user: {},

         projects: [{ ttt: 1 }, { ttt: 1 }, { ttt: 1 }],
         loading: false,
         radarLoading: false,
         activities: [{ ttt: 1 }, { ttt: 1 }, { ttt: 1 }],
         teams: [{ ttt: 1 }, { ttt: 1 }, { ttt: 1 }],

         // data
         axis1Opts: {
            dataKey: "item",
            line: null,
            tickLine: null,
            grid: {
               lineStyle: {
                  lineDash: null
               },
               hideFirstLine: false
            }
         },
         axis2Opts: {
            dataKey: "score",
            line: null,
            tickLine: null,
            grid: {
               type: "polygon",
               lineStyle: {
                  lineDash: null
               }
            }
         },
         scale: [
            {
               dataKey: "score",
               min: 0,
               max: 80
            }
         ],
         axisData: [
            { item: "引用", a: 70, b: 30, c: 40 },
            { item: "口碑", a: 60, b: 70, c: 40 },
            { item: "产量", a: 50, b: 60, c: 40 },
            { item: "贡献", a: 40, b: 50, c: 40 },
            { item: "热度", a: 60, b: 70, c: 40 },
            { item: "引用", a: 70, b: 50, c: 40 }
         ],
         radarData: [],
         //  弹窗
         ruleForm: {},
         modalStatus: false,
         confirmLoading: false,
         loading: false,
         rules: {
            name: [{ required: true, message: "请输入项目名称" }],
            templateCode: [{ required: true, message: "请选择项目模板" }]
         },
         templateList: [],

         // 项目
         tableLoading: false,
         page: {
            total: 0, // 总数
            pages: 0, // 总页数
            currentPage: 1, // 当前页数
            pageSize: 6 // 每页显示多少条
         },
         projectData: [],
         projectTypeList: [
            {
               value: "1",
               label: "团队项目"
            },
            {
               value: "2",
               label: "社区项目"
            }
         ],
         incentiveTypeList: [
            {
               value: 1,
               label: "单个任务发放"
            },
            {
               value: 2,
               label: "项目完成发放"
            }
         ],
         formLabelWidth: "120px",
         dialogName: 1
      };
   },
   created() {
      this.getList(this.page);
   },
   watch: {
      screen(val) {
         if (val == 0) {
            this.formLabelWidth = "-1";
         } else {
            this.formLabelWidth = "120px";
         }
      }
   },
   mounted() {
      var data = [
         {
            item: "Test",
            a: 60,
            b: 70
         },
         {
            item: "Language",
            a: 70,
            b: 50
         },
         {
            item: "Technology",
            a: 50,
            b: 40
         },
         {
            item: "Support",
            a: 30,
            b: 40
         },
         {
            item: "Sales",
            a: 60,
            b: 40
         },
         {
            item: "UX",
            a: 50,
            b: 60
         }
      ];

      const dv = new DataSet.View().source(data);
      dv.transform({
         type: "fold",
         fields: ["个人", "团队", "部门"],
         key: "user",
         value: "score"
      });

      this.radarData = dv.rows;
   },
   methods: {
      getList(page, params) {
         this.tableLoading = true;
         fetchList(
            Object.assign(
               {
                  current: page.currentPage,
                  size: page.pageSize
               },
               params,
               this.searchForm
            )
         )
            .then(response => {
               this.projectData = response.data.data.records;
               this.page.total = response.data.data.total;
               this.page.pages = response.data.data.pages;
               this.tableLoading = false;
            })
            .catch(() => {
               this.tableLoading = false;
            });
      },
      allProject() {
         this.page = {};
         this.getList(this.page);
      },
      prev() {
         this.page.currentPage--;
         this.getList(this.page);
      },
      next() {
         this.page.currentPage++;
         this.getList(this.page);
      },
      submitForm(formName) {
         this.ruleForm.orgId = this.$store.getters.userInfo.ecoUserNo;
         this.$refs[formName].validate(valid => {
            if (valid) {
               addObj(this.ruleForm).then(res => {
                  this.modalStatus = false;
                  this.page.currentPage = 1;
                  this.getList(this.page);
               });
            } else {
               console.log("error submit!!");
               return false;
            }
         });
      },
      resetForm(formName) {
         this.$refs[formName].resetFields();
      },
      creatPro() {
         this.ruleForm = {};
         this.modalStatus = true;
         this.dialogName = 1;
      },
      proEdit(row) {
         this.ruleForm = {};
         this.modalStatus = true;
         this.dialogName = 2;
         this.ruleForm = row;
         console.log(this.ruleForm);
      },
      proEditSub(formName) {
         this.$refs[formName].validate(valid => {
            if (valid) {
               putObj(this.ruleForm)
                  .then(res => {
                     this.getList(this.page);
                     this.modalStatus = false;
                  })
                  .catch(() => {
                     this.$message({
                        type: "info",
                        message: "修改失败"
                     });
                  });
            } else {
               return false;
            }
         });
      },
      delEdit(row) {
         this.$confirm(
            "此操作将组织机构名为“ " + row.name + " ”数据删除, 是否继续?",
            "提示",
            {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
            }
         )
            .then(() => {
               delObj(row.projectId).then(res => {
                  this.pageData()
                  this.getList(this.page);
                  this.$message({
                     type: "success",
                     message: "删除成功!"
                  });
               });
            })
            .catch(() => {
               this.$message({
                  type: "info",
                  message: "已取消删除"
               });
            });
      },
      // 处理最后一条数据返回上一页
      pageData() {
         const totalPage = Math.ceil(
            (this.page.total - 1) / this.page.pageSize
         ); // 总页数
         this.page.currentPage =
            this.page.currentPage > totalPage
               ? totalPage
               : this.page.currentPage;
         this.page.currentPage =
            this.page.currentPage < 1 ? 1 : this.page.currentPage;
      }
   }
};
</script>

<style lang="less" scoped>
.project-list {
   .card-title {
      font-size: 0;

      a {
         color: rgba(0, 0, 0, 0.85);
         margin-left: 12px;
         line-height: 24px;
         height: 24px;
         display: inline-block;
         vertical-align: top;
         font-size: 14px;

         &:hover {
            color: #1890ff;
         }
      }
   }
   .card-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
   }
   .project-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      overflow: hidden;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      a {
         color: rgba(0, 0, 0, 0.45);
         display: inline-block;
         flex: 1 1 0;
         text-align: right;

         &:hover {
            color: #1890ff;
         }
      }
      .datetime {
         color: rgba(0, 0, 0, 0.25);
         flex: 0 0 auto;
         // float: right;
      }
   }
   .ant-card-meta-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
   }
}

.item-group {
   padding: 20px 0 8px 24px;
   font-size: 0;
   a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
   }
}

.members {
   a {
      display: block;
      margin: 12px 0;
      line-height: 24px;
      height: 24px;
      .member {
         font-size: 14px;
         color: rgba(0, 0, 0, 0.65);
         line-height: 24px;
         max-width: 100px;
         vertical-align: top;
         margin-left: 12px;
         transition: all 0.3s;
         display: inline-block;
      }
      &:hover {
         span {
            color: #1890ff;
         }
      }
   }
}

.mobile {
   .project-list {
      .project-card-grid {
         width: 100%;
      }
   }

   .more-info {
      border: 0;
      padding-top: 16px;
      margin: 16px 0 16px;
   }

   .headerContent .title .welcome-text {
      display: none;
   }
}
.page-header .detail .avatar > span {
   border-radius: 72px;
   display: block;
   width: 72px;
   height: 72px;
}
.page-header .detail .w-main .content,
.page-header .detail .w-main .headerContent {
   -webkit-box-flex: 1;
   -ms-flex: auto;
   flex: auto;
   color: rgba(0, 0, 0, 0.45);
   line-height: 22px;
}
.avatar {
   float: left;
   width: 72px;
   height: 72px;
}
.headerContent {
   float: left;
   min-width: 372px;
   height: 72px;
   padding: 10px;
}

.el-dropdown-link {
   cursor: pointer;
   color: #409eff;
}
.el-icon-arrow-down {
   font-size: 12px;
}
</style>
